<nz-card>
  <!--操作-->
  <nz-row>
    <button nz-button nzType="primary" (click)="addCategory()">添加分类</button>
  </nz-row>
  <!--表格-->
  <nz-table
    #rowSelectionTable
    nzSize="small"
    nzShowSizeChanger
    nzOuterBordered
    [nzData]="listOfData.records"
    nzShowPagination="false"
    [nzPageSize]="999"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)"
  >
    <thead>
    <tr>
      <th nzAlign="center" [nzWidth]="'100px'">排序</th>
      <th>名称</th>
      <th nzAlign="center" [nzWidth]="'100px'">状态</th>
      <th nzAlign="center" nzWidth="250px">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
      <td nzAlign="center">{{ index + 1 }}</td>
      <td>{{ data['name'] }}</td>
      <td nzAlign="center">
        <span [ngStyle]="{color: data['status']===1?'#67C23A':'black'}">
        {{ data['status'] === 1 ? '启用' : '禁用' }}
        </span>
      </td>
      <td nzAlign="center" style="display: flex;flex-direction: row;justify-content: space-between">
        <button nz-button nzType="link" [disabled]="index==0" (click)="moveRow(data['id'],'up')">上移</button>
        <button nz-button nzType="link" [disabled]="index+1 === rowSelectionTable.data.length" (click)="moveRow(data['id'],'dn')">下移</button>
        <button nz-button nzType="link" [ngStyle]="{color: data['status']===1?'#F56C6C':'#67C23A'}" (click)="using(data)">{{data['status']===1?'禁用':'启用'}}</button>
        <button nz-button nzType="link" (click)="edit(data)">编辑</button>
        <a
          nz-button
          nzType="link"
          nzDanger
          nzPopconfirmPlacement="top"
          nz-popconfirm
          nzPopconfirmTitle="确认要删除该数据吗?"
          nzOkText="确认"
          nzCancelText="取消"
          (nzOnConfirm)="deleteRow(data['id'])">
          删除
        </a>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <!-- 分页template -->
  <ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>
</nz-card>

<!--模态框-->
<nz-modal [(nzVisible)]="modal.modalVisible" [nzTitle]="modal.isAdd?'添加分类':'编辑分类'" (nzOnCancel)="handleModalCancel()"
          (nzOnOk)="handleModalOk()">
  <ng-container *nzModalContent>
    <nz-row class="modalRow">
      <label for="name"><span>*</span>名称:</label>
      <input id="name" nz-input placeholder="请输入分类名称" [(ngModel)]="form.name"/>
    </nz-row>
    <nz-row class="modalRow">
      <label for="status"><span>*</span>状态:</label>
      <nz-radio-group id="status" [(ngModel)]="form.status">
        <label nz-radio nzValue="1">启用</label>
        <label nz-radio nzValue="0">禁用</label>
      </nz-radio-group>
    </nz-row>
  </ng-container>
</nz-modal>
